<template>
  <div class="account-setting">
    <div class="my-account">账户</div>
    <div class="account-row-item clearfix">
      <div class="account-label gray-75">手机</div>
      <template v-if="!editPhone">
        <span class="gray">{{ userDetail.phone }}</span>
        <span class="pointer blue-e5 phone-margin" @click="editPhone=true">修改</span>
      </template>
      <div v-else>
        <a-space size="large">
          <a-input v-model:value="userDetail.phone" autofocus style="width: 200px" />
          <a-button size="small" type="primary" danger @click="submitPhone">提交</a-button>
          <a-button size="small" @click="editPhone=false">取消</a-button>
        </a-space>
      </div>
    </div>
    <div class="account-row-item clearfix">
      <div class="account-label gray-75">邮箱</div>
      <template v-if="!editEmail">
        <span class="gray">{{ userDetail.email ? userDetail.email : "未填写" }}</span>
        <span class="pointer blue-e5 phone-margin" @click="editEmail=true">修改</span>
      </template>
      <div v-else>
        <a-space size="large">
          <a-input v-model:value="userDetail.email" autofocus style="width: 200px" />
          <a-button size="small" type="primary" danger @click="submitEmail">提交</a-button>
          <a-button size="small" @click="editEmail=false">取消</a-button>
        </a-space>
      </div>
    </div>
    <div class="account-row-item">
      <div class="account-label gray-75">密码</div>
      <LockOutlined style="color: #9e9e9e" />
      <span class="pointer blue-e5" style="margin-left: 10px" @click="editPassword=true">修改</span>
    </div>
  </div>
  <a-modal v-model:open="editPassword" title="修改密码" @ok="submitForm" okText="保存"
           cancelText="取消">
    <a-form ref="formRef" :model="form" :label-col="labelCol" :wrapperCol="wrapperCol"
            :rules="validatorRules">
      <a-form-item label="原密码" name="oldPassword">
        <a-input-password v-model:value="form.oldPassword" placeholder="请输入原密码" />
      </a-form-item>
      <a-form-item label="新密码" name="newPassword">
        <a-input-password v-model:value="form.newPassword" placeholder="请输入新密码" />
      </a-form-item>
      <a-form-item label="确认密码" name="confirmPassword">
        <a-input-password v-model:value="form.confirmPassword" placeholder="请输入确认密码" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { useWebStore } from "@/store";
import { LockOutlined } from "@ant-design/icons-vue";
import { apiUpdatePassword, apiUserEdit } from "@/api/user";
import { useMessage } from "@/hooks/web/useMessage";
import { useRouter } from "vue-router";

const formRef = ref();

const form = reactive({
  id: "",
  username: "",
  oldPassword: "",
  newPassword: "",
  confirmPassword: ""
});
const labelCol = reactive({
  xs: { span: 24 },
  sm: { span: 5 }
});
const wrapperCol = reactive({
  xs: { span: 24 },
  sm: { span: 17 }
});
const validatorRules = {
  oldPassword: [{ required: true, message: "请输入原有密码" }],
  newPassword: [{ required: true }, {
    pattern: /^(?=.*[0-9])(?=.*[a-zA-Z])(.{8,20})$/,
    message: "8-20位，需包含字母和数字"
  }],
  confirmPassword: [{ required: true, message: "请输入确认密码" }]
};

const { createMessage } = useMessage();
const editPhone = ref<boolean>(false);
const editEmail = ref<boolean>(false);
const editPassword = ref<boolean>(false);

const webStore = useWebStore();
const userDetail = ref<any>([]);
const router = useRouter();

onMounted(() => {
  userDetail.value = webStore.getUserInfo;
  if (Object.getOwnPropertyNames(userDetail.value).length == 0) {
    router.push("/login");
  }
});

async function submitPhone() {
  if (!userDetail.value?.phone) {
    return createMessage.error("请输入手机号");
  }
  await apiUserEdit(userDetail.value);
  createMessage.success("修改手机号成功");
  editPhone.value = false;
}

async function submitEmail() {
  if (!userDetail.value?.email) {
    return createMessage.error("请输入邮箱");
  }
  await apiUserEdit(userDetail.value);
  createMessage.success("修改邮箱成功");
  editEmail.value = false;
}

function submitForm() {
  formRef.value
    .validate()
    .then(async () => {
      form.username = userDetail.value.username;
      await apiUpdatePassword(form);
      createMessage.success("密码修改成功");
      editPassword.value = false;
    });
}
</script>
<style lang="less" scoped>
.account-setting {
  padding: 30px 40px 0 40px;

  .account-row-item {
    align-items: center;
    /*begin 兼容暗夜模式*/
    border-bottom: 1px solid #d9d9d9;
    /*end 兼容暗夜模式*/
    box-sizing: border-box;
    display: flex;
    height: 71px;
    position: relative;
  }

  .account-label {
    text-align: left;
    width: 160px;
  }

  .gray-75 {
  }

  .pointer {
    cursor: pointer;
  }

  .blue-e5 {
    color: #1e88e5;
  }

  .phone-margin {
    margin-left: 24px;
    margin-right: 24px;
  }

  .clearfix:after {
    clear: both;
  }

  .clearfix:before {
    content: "";
    display: table;
  }

  .my-account {
    font-size: 17px;
    font-weight: 700 !important;
    margin-bottom: 20px;
  }
}

</style>
